<template>
	<view class="shopDetails">
		<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false" @init="initNavigation" title="商家详情" backgroundColor="#fff" color="#000">
		 <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
		   <tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
		 </view>
		</tui-navigation-bar>
		 
		<view class="shopDetails_content" :style="{ marginTop: marginTp + 'px' }">
			<view class="banner" v-if="shopDetails.masterImg">
				<image class="bannerImage" :src="ossUrl + (shopDetails.masterImg||'')"  ></image>
			</view>
			<view class="banner" v-else>
				<view class="bannerImage" style="background-color: #fff;"  ></view>
			</view>
			<view class="titleText">
				<text>{{shopDetails.merchantName}}</text> 
			</view>
			<view class="timeText">
				<view class="lt"><text>营业时间：{{shopDetails.startTime}}—{{shopDetails.endTime}}</text></view>
				<view class="rt"><text>{{className}}</text></view>
			</view>
			<view class="addressText">
			   商家地址：<text class="ct">{{shopDetails.address}}</text>
			</view>
			<view class="noticeText">
				 
			</view>
			<view class="tabList">
				<view class="tabList_tab">
					<tutor-tab :list="['商家图片','教练列表']" @clickSwtichTab="clickSwtichTab" :atciveIndex="atciveIndex"></tutor-tab>
				</view>
				<view class="shopDetailsContent"> 
					<view class="tabList_banner" v-show="!atciveIndex"> 
						<tutor-videoImg-swiper :ossUrl="ossUrl" :imgUrls="imgUrls" ></tutor-videoImg-swiper>
					</view>
					<z-paging ref="paging" :fixed="false" v-model="listData" @query="queryList">
						<view class="shopImg" v-if="!atciveIndex"> 
							<view class="appraiseTitle">
								<text class="appraiseText">评价</text>
								<view class="appraiseNum">(<text class="num">{{appraiseData.total}}</text>)</view>
							</view>
							<view class="appraiseItems">
								<tutor-appraiseItem :listData="listData"></tutor-appraiseItem>
							</view>
						</view>
						<view class="tutorList" v-else>
							<tutor-tutorStatusCard   @inviteTutor="inviteTutorClick" :isHideButton="1"  :ossUrl="ossUrl" :tutorList="listData"></tutor-tutorStatusCard>
						</view>
					</z-paging> 
				</view> 
			</view>
		</view> 
		<tutor-invite :hours="hours"  :assistantId="assistantId" :merchantId="merchantId" @confimInvite="confimInvite" @clear="clearInvite" :visible="inviteVisible" :categoryId="categoryId"></tutor-invite>
	</view>
</template>

<script>
	import { getShopDetails } from "@/http/api/shop/shop.js" 
	import { getTutorList } from "@/http/api/tutor/tutor.js"  
	import { getAppraiseList, putAppraise } from "@/http/api/appraise/appraise.js"  
    import Cache from "@/utils/cache"
	export default { 
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp:0,
				shopDetails:{},//商家信息
				shopId:'',//商家id
				hours:[],
				ossUrl:getApp().globalData.ossurl,//图片前缀
				atciveIndex:0,//切换商家图片和教练列表 
				appraiseData:{},//评价列表返回数据
				listData:[],
				categoryId:'',//分类id
				assistantId:'',//教练id
				merchantId:'',//商家id
				inviteVisible:false,//教练邀约弹出
			}
		},
		onLoad(options) {
			if(options.id){
				this.shopId=options.id
				this.getDetails() 
			}
		}, 
		computed:{
			imgUrls(){
				return  this.shopDetails.detailImgs 
			}, 
			// videoline(){
			// 	if(this.shopDetails.detailImgs&&this.shopDetails.detailImgs.length || false){  
			// 		if(this.isImage(this.shopDetails.detailImgs[this.shopDetails.detailImgs.length - 1])){
			// 			 return ''
			// 		}else{
			// 			 return  this.shopDetails.detailImgs[this.shopDetails.detailImgs.length - 1]
			// 		} 
			// 	}
			// },
			className(){
				  return  this.$store.getters.categoryName(this.shopDetails.categoryId);
			}
		},
		methods: { 
			isImage(filename) {
			    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg'];
			    const fileExtension = filename.slice(filename.lastIndexOf('.'));
			    return imageExtensions.includes(fileExtension.toLowerCase());
			},
			initNavigation(e) {  
			 		this.top = e.top;
					this.marginTp =e.height
			},
			back() {
			 		uni.navigateBack();
			}, 
			//成功邀约
			confimInvite(){
				this.inviteVisible=false 
				this.$refs.paging.reload();
			},
			//关闭邀约
			clearInvite(){
				this.inviteVisible=false 
			},
			//邀约
			inviteTutorClick(ids){
				this.categoryId=ids.categoryId
				this.assistantId=ids.assistantId
				this.merchantId=this.shopId
				this.inviteVisible=true 
			},
			clickSwtichTab(data){
				this.atciveIndex= data.index
				this.$refs.paging.reload()
			},
			getDetails(){
				getShopDetails(this.shopId).then(res=>{
					if(res.code===200){
						this.shopDetails=res.data
						const hous=res.data.category.hours || 1
						this.hours=this.generateHourOptions(hous);
					} 
					console.log(res,'获取当前商家信息')
				})
			},
			generateHourOptions(minHours) {
				const maxHours = 8; // 假设最大为6小时
				const result = [];

				for (let i = minHours; i <= maxHours; i++) {
					result.push({
						name: `${i}小时`,
						id: i
					});
				}

				return result;
			},
			//加载评价教练列表
			queryList(pageNo, pageSize) { 
				if(!this.atciveIndex){
					getAppraiseList({pageNum:pageNo,pageSize,commentType:2,beUserType:1,beUserId:this.shopId}).then(res => {
						if (res.code == 200) {
							 this.appraiseData=res
							 this.$refs.paging.complete(res.rows); 
						} else {
							this.$utils.toast(res.msg);
						}
					}) 
				}else{
					 getTutorList({pageNum:pageNo,pageSize,merchantId:this.shopId}).then(res => {
						if (res.code == 200) { 
							 this.$refs.paging.complete(res.rows); 
						} else {
							this.$utils.toast(res.msg);
						}
					}) 
				 }
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './shopDetails.scss';
</style>